<template>
	<div style="width:100%">
		<el-upload class="upload-common"
			:action="uploadUrl"
			:headers="headers"
			:on-change="handleChange"
			:multiple="multiple"
			:before-upload="beforeUpload"
			:file-list="fileList"
			:list-type="listType">
				<div v-if="listType == 'picture-card'">
					<i  slot="default" class="el-icon-plus"></i>
				</div>
				<div  slot="file" slot-scope="{file}">
					<div v-if="listType!='picture-card'" style="width: 100%;height: 100%;">
						<span>
							<i class="el-icon-document"></i>
							{{file.name}}
						</span>
						<span class="file-row-icon" v-if="!disabled" style="color: red;" @click="handleRemove(file)">
							<i class="el-icon-delete"></i>
						</span>
						<span class="file-row-icon" v-if="!disabled" @click="handleDownload(file)">
							<i class="el-icon-download"></i>
						</span>
						<span class="file-row-icon" v-if="!disabled" style="color:#13CE66;" @click="handleEdit(file)">
							<i class="el-icon-edit"></i>
						</span>
						<span class="file-row-icon" v-if="!disabled" style="color:#E6A23C;" @click="handlePreview(file)">
							<i class="el-icon-view"></i>
						</span>
					</div>
					<div v-else >
						<img class="el-upload-list__item-thumbnail"  :src="imageUrl + file.fileId" alt="">
						<span class="el-upload-list__item-actions">
							<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
								<i class="el-icon-zoom-in"></i>
							</span>
							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
								<i class="el-icon-download"></i>
							</span>
							<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
								<i class="el-icon-delete"></i>
							</span>
						</span>
					</div>
					<el-progress v-if="file.status != null && file.status != 'success'" style="margin-top:15px;" :percentage="file.percentage.toFixed(2) - 0.1" ></el-progress>

				</div>
				<div v-if="listType != 'picture-card'">
					<el-button  size="small" type="primary">点击上传</el-button>
				</div>

		</el-upload>
		<el-dialog :visible.sync="dialogVisible" append-to-body top="20px">
		  <img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>
<style>
	.file-row-icon {
		float: right;
		margin-right: 0.625rem;
	}
</style>
<script>
	import axios from 'axios'
	import request from '@/utils/request'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		name: 'commonUpload',
		props: {
			"fileIds": {
				type: String,
				default: ""
			},
			"multiple": {
				type: Boolean,
				default: false
			},
			// 是否是图片列表
			"listType": {
				type: String,
				default: "text"
			},
		},
		data() {
			return {
				fileUploadPercent: 0,
				fileFlag: false,
				dialogImageUrl: '',
				dialogVisible: false,
				headers: {
					'X-Token': getToken()
				},
				uploadUrl: process.env.VUE_APP_BASE_API + "/system/file/upload",
				imageUrl: process.env.VUE_APP_BASE_API + "/system/file/download?X-Token=" + getToken() + "&fileId=",
				disabled: false,
				fileList: [],
				updateList:  true
			};
		},
		watch: {
			fileIds: function(oldVal, newVal) {
				if(this.updateList){
					this.getFileList();
				}
				this.updateList = true;
			}
		},
		//页面初始化加载
		mounted() {
			this.getFileList();
		},
		methods: {

			handlePictureCardPreview(file) {
				this.dialogImageUrl = this.imageUrl + file.fileId;
				this.dialogVisible = true;
			},
			handleChange(file, fileList) {
				this.fileList = fileList
				if (file.response && file.response.code == 20000) {
					let fileIds = [];
					for (var i = 0; i < this.fileList.length; i++) {
						if (file.uid == this.fileList[i].uid) {
							this.fileList[i]['fileId'] = file.response.data.fileId;
							this.fileList[i]['info'] = file.response.data;
						}
						fileIds.push(this.fileList[i]['fileId']);
					}
					this.updateList = false;
					this.$emit("update:fileIds", fileIds.toString())
					this.$emit("fileChange", file.response.data)
				}
			},

			//根据文件Id获取文件列表
			getFileList() {
				if (!this.fileIds) {
					this.fileList = [];
					return;
				}
				var params = {
					fileIds: this.fileIds
				}
				request({
					url: '/system/file/query',
					method: 'post',
					data: params
				}).then(response => {

					this.fileList = response.data.map((value, key, arr) => {
						value.uid = value.fileId;
						value.name = value.fileName;
						return value;
					})

					// this.fileList = response.data;
				})
			},

			// 文件刪除
			handleRemove(file) {
				for (var i = 0; i < this.fileList.length; i++) {
					if (file.uid == this.fileList[i].uid) {
						this.fileList.splice(i, 1)
						break;
					}
				}
				this.updateFileIds();
			},
			updateFileIds() {
				let fileIds = [];
				for (var i = 0; i < this.fileList.length; i++) {
					fileIds.push(this.fileList[i]['fileId']);
				}
				this.updateList = false;
				this.$emit("update:fileIds", fileIds.toString())
			},
			beforeUpload(file) {
				if (!this.multiple && this.fileList.length > 1) {
					this.$message.warning(`只能上传一个文件`);
					return false;
				}
			},
			//文件下载
			handleDownload(file) {
				var fileId = file.fileId;
				let entity = {
					fileId: fileId,
				}
				axios({
					url: process.env.VUE_APP_BASE_API + "/system/file/download?fileId=" + fileId,
					method: 'post',
					data: entity,
					responseType: 'blob'
				}).then(response => {
					this.download(response.data, file)
				})

			},
			// 下载文件
			download(data, row) {
				if (!data) {
					return
				}
				let url = window.URL.createObjectURL(new Blob([data]))
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				// 获取文件名
				// download 属性定义了下载链接的地址而不是跳转路径
				link.setAttribute('download', row.name)
				document.body.appendChild(link)
				link.click()
			},
			// 在线预览
			handlePreview(file) {
				window.open(process.env.VUE_APP_BASE_API + "/system/html/onlyOffice.html?mode=view&fileId=" + file.fileId +
					"&X-Token=" + getToken(), '_blank')
			},
			// 在线编辑
			handleEdit(file) {
				window.open(process.env.VUE_APP_BASE_API + "/system/html/onlyOffice.html?mode=edit&fileId=" + file.fileId +
					"&X-Token=" + getToken(), '_blank')
			}
		}
	}
</script>
<style>
	.upload-common {
		    width: 100%;
	}
	.avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
